// 获取元素
const navCategoryHead = document.querySelector(".nav-category-head");
const category = document.querySelector(".category");

// 定义一个全局变量 存储获取的数据结果
let goodsMsg;

// 给一级菜单添加移入事件
navCategoryHead.addEventListener("mouseover", function () {
  category.style.display = "block";
});

// 添加移出事件
navCategoryHead.addEventListener("mouseleave", function () {
  category.style.display = "none";
});

category.addEventListener("mouseover", function () {
  category.style.display = "block";
});

category.addEventListener("mouseleave", function () {
  category.style.display = "none";
});

// 页面渲染函数
// ?goodsId=36091378&sa=pc
setPage();
async function setPage() {
  const urlObj = myGetUrlVal();
  // console.log(urlObj);
  if (urlObj.goodsId === "undefined") {
    urlObj.goodsId = localStorage.goodsId;
  }
  const res = await pAjax({
    url: `/detail?goodsId=${urlObj.goodsId}&sa=pc`,
    dataType: "json",
  });
  // console.log(res);
  // 把当前商品的商品 id 存入本地
  localStorage.goodsId = urlObj.goodsId;

  // 给全局变量赋值
  goodsMsg = res;

  // 动态生成页面
  const wares = document.querySelector(".wares");

  let detailStr = "";

  detailStr += `
  <div class="wares-icon">
  <div class="wares-big">
    <div class="wares-big-con">
    `;
  res.data.goodsPicture.forEach(function (item) {
    detailStr += `
      <p>
      <img
        src="${item.picUrl}"
        alt="">
    </p>
      `;
  });
  detailStr += `
    </div>
    </div>
    <div class="wares-small">
      <div class="wares-small-con">
        <ul>
    `;

  res.data.goodsPicture.forEach(function (item, key) {
    detailStr +=
      key === 0
        ? `
      <p name="smallPig" index=${key} class="active">
      <img
        src="${item.picUrl}"
        alt="">
    </p>
      `
        : ` <p name="smallPig" index=${key}>
      <img
        src="${item.picUrl}"
        alt="">
    </p>
    `;
  });
  detailStr += `
  </ul>
  </div>

</div>
</div>
<div class="wares-deploy">
<div class="wares-name">${res.data.goodsName}</div>
<div class="wares-price">
  <span>
    价
    <span>格</span>
  </span>
  <span>
    ¥
    <span>${res.data.goodsPrice}</span>
  </span>
</div>
<div class="wares-count wares-count-active">
  <p>
    数
    <span>量</span>
  </p>
  <div>
    <button name="-">
      <img
        src=""
        alt="">
    </button>
    <input value="1" name="num"></input>
    <button name="+">
      <img
        src=""
        alt="">
    </button>
  </div>
</div>
<div class="wares-btn">
  <p class="addCart">加入购物车</p>
  
</div>
</div>
  `;
  wares.innerHTML = detailStr;

  // 渲染基本参数
  const params = document.querySelector(".sell-well-con");
  // console.log(res);
  let paramsStr = "";

  res.data.goodsParams.forEach(function (item) {
    paramsStr += `
  <div class="wares-info">
  <div class="wares-info-title">
    <p class="active">规格参数</p>
  </div>
  <div class="wares-info-con">
    <div class="wares-specs">
      <div class="wares-parameter">
        <div class="wares-parameter-name">${item.name}</div>
  `;
    for (i = 0; i < item.value.length; i++) {
      paramsStr += `
      <div class="wares-parameter-info">
        <p class="parameter-info-name">${item.value[i].name}</p>
        <p class="parameter-info-value">${item.value[i].value}</p>
      </div>
    `;
    }
    paramsStr += `
  </div>
  </div>
</div>
</div>
  `;
  });

  params.innerHTML = paramsStr;
}
// 获取父元素
const wares = document.querySelector(".wares");

wares.addEventListener("click", function (e) {
  const bigPig = document.querySelector(".wares-big-con");
  if (e.target.getAttribute("name") === "smallPig") {
    // 获取所有的 smallPig
    const smallPig = document.querySelectorAll('[name="smallPig"]');
    // 循环删除类名 active
    smallPig.forEach(function (item) {
      item.classList.remove("active");
    });
    // 给点击的添加 类名 active
    e.target.classList.add("active");

    // console.log(e.target);
    if (e.target.getAttribute("index") === "0") {
      bigPig.style.left = 0 + "px";
      bigPig.style.width = 2260 + "px";
      bigPig.style.transition = "all 1s ease 0s";
    } else if (e.target.getAttribute("index") === "1") {
      bigPig.style.left = -452 + "px";
      bigPig.style.width = 2260 + "px";
      bigPig.style.transition = "all 1s ease 0s";
    } else if (e.target.getAttribute("index") === "2") {
      bigPig.style.left = -904 + "px";
      bigPig.style.width = 2260 + "px";
      bigPig.style.transition = "all 1s ease 0s";
    } else if (e.target.getAttribute("index") === "3") {
      bigPig.style.left = -1356 + "px";
      bigPig.style.width = 2260 + "px";
      bigPig.style.transition = "all 1s ease 0s";
    } else if (e.target.getAttribute("index") === "4") {
      bigPig.style.left = -1808 + "px";
      bigPig.style.width = 2260 + "px";
      bigPig.style.transition = "all 1s ease 0s";
    }
  }

  if (e.target.getAttribute("name") === "-") {
    // 获取元素
    const num = document.querySelector('[name="num"]');
    let numVal = Number(num.value);

    // 点击的是 - 按钮
    // 设定每次点击input的数值是 本身 -1
    // 最小为1
    num.value = numVal <= 1 ? 1 : numVal - 1;
  }

  if (e.target.getAttribute("name") === "+") {
    // 获取元素
    const num = document.querySelector('[name="num"]');
    let numVal = Number(num.value);

    // 点击的是 + 按钮
    // 设定每次点击input的数值是 本身 +1
    // 最大为 库存值
    num.value = numVal + 1;
  }

  if (e.target.className === "addCart") {
    // 判断是否是登录状态
    if (window.localStorage.login === undefined) {
      // 没有登录,跳转到登录页面
      if (window.confirm("你还没有登录,点击确定跳转到登录页面")) {
        // 跳转登录页 同时携带 当前网页的 url 地址
        window.location.href = `./login.html?url=${window.location.href}`;
      }
    } else {
      // 到这里说明已经登录了, 商品加入购物车

      // 判断 localStroage 中有没有 购物车信息
      if (window.localStorage.cart === undefined) {
        // 当前没有购物车信息,创建 购物车
        // 给 localSrorage 新增 购物车属性 cart 属性值
        // 是 当前商品的数据信息

        // 给商品信息 添加属性
        // 购买状态 默认购买
        goodsMsg.buy = true;

        const num = document.querySelector('[name="num"]');
        let numVal = Number(num.value);

        // 添加购买数量属性
        goodsMsg.num = Number(numVal);

        // 将 当前商品信息 转化为 json 字符串 存储在 数组中 写入 localStorage 中
        window.localStorage.cart = JSON.stringify([goodsMsg]);

        // 提示添加成功并跳转购物车页面
        alert("当前商品成功加入购物车");
        window.location.href = "./cart.html";
      } else {
        // 到这里说明 localStroage 里已经有 购物车信息,但是信息是 json格式,需要还原
        const cart = JSON.parse(localStorage.cart);

        if (cart.length === 0) {
          // 如果 cart 数组长度为 0 ,说明 购物车是个空车, 没有商品数据
          //  将 当前商品信息 写入 空数组
          //  新增商品 是 数组的起始位置
          // 给商品信息 添加属性
          // 购买状态 默认购买
          goodsMsg.buy = true;

          // 购买数量 最小是1 最大是存储值
          const num = document.querySelector('[name="num"]');
          let numVal = Number(num.value);
          if (!(numVal >= 1)) {
            // 弹出提示内容
            alert(`您输入的商品数量有误,您输入的最少数量为 1 `);

            // 终止之后程序 商品信息不写入数据库
            return;
          }

          // 添加购买数量属性
          goodsMsg.num = numVal;

          // 放在数组最前面
          cart.unshift(goodsMsg);

          // 将新的 数组cart 存入到 localStroage里
          localStorage.cart = JSON.stringify(cart);

          // 提示添加成功并跳转购物车页面
          alert("当前商品成功加入购物车");
          window.location.href = "./cart.html";
        } else {
          // 到这里说明 cart 数组不为 0 也就是说 购物车中有数据
          // 判断 购物车里 有没有当前商品
          // 在 cart 数组中 判断存储的对象中goods_id 和 当前商品 goodsMsg 的 goods_id 有没有相同的
          let bool = cart.some(function (item) {
            // item 是 当前数组中的对象 item.goods_id 是 商品的id主键值
            // 当前商品是 goodsMsg , goodsMsg.goods_id 是 当前商品的id主键值
            // 如果有一个相同 some() 执行结果 就是 true
            return item.data.goodsId === goodsMsg.data.goodsId;
          });
          // console.log(bool);
          if (bool) {
            // 如果 bool 是 true 证明 当前商品已经存在
            // 给 goods_id 相同的 商品 添加 购买数量
            // 新增的购买数量 + 原始的购买数量 不能超过 库存值
            for (let i = 0; i < cart.length; i++) {
              // cart 是 存储商品的数组 i 是 数组的索引下标
              // cart[i] 是 数组存储的 商品数据对象
              // cart[i].goods_id 是 数组中存储商品的goods_id
              // goodsMsg.goods_id 是 当前商品的goods_id
              if (cart[i].data.goodsId === goodsMsg.data.goodsId) {
                // 存储的商品 和 当前的商品 是 同一个商品
                // 给 存储商品的购买数量 累加 新增的购买数量
                // 当前商品是 cart[i]  购买数量是 cart[i].num
                // 当前新增的购买数量是 Number($('.num').val())
                // 累加之后 数值范围必须是 1 - 库存之间
                const num = document.querySelector('[name="num"]');
                let numVal = Number(num.value);

                // 累加总数
                cart[i].num += Number(numVal);
                // 将新的 cart 数组 转化为 json 存入 localStroage
                localStorage.cart = JSON.stringify(cart);

                // 提示添加成功并跳转购物车页面
                alert("当前商品成功加入购物车");
                window.location.href = "./cart.html";
              }
            }
          } else {
            // 如果 bool 结果为 false,说明购物车里没有当前商品
            goodsMsg.buy = true;

            // 购买数量 最小是1 最大是存储值
            const num = document.querySelector('[name="num"]');
            let numVal = num.value;

            // 添加购买数量属性
            goodsMsg.num = numVal;

            // 放在数组最前面
            cart.unshift(goodsMsg);

            // 将新的 数组cart 存入到 localStroage里
            localStorage.cart = JSON.stringify(cart);

            // 提示添加成功并跳转购物车页面
            alert("当前商品成功加入购物车");
            window.location.href = "./cart.html";
          }
        }
      }
    }
  }
});

// 获取 我的购物车 角标,从 localStroage 中取出 cart 数组 角度 = cart 数组的 length
// const cartNum = document.querySelector(".cartNum");
// const cart = JSON.parse(localStorage.cart);
// cartNum.innerHTML = cart.length;
